<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/echarts.min.js"></script>
    <script src="js/jquery.min.js"></script>
    <style>
        #main,
        html,
        body {
            width: 100%;
        }

        #main {
            height: 400px;
        }
    </style>
</head>

<body>
    <!-- 容器元素 -->
    <div id="main" style="height:400px;"></div>
    <script type="text/javascript">
        // 初始化容器
        var myChart = echarts.init(document.getElementById('main'));
        // 设置图标的配置项
        let option = {
            legend: {},
            tooltip: {},
            // 数据集
            dataset: {
                // 提供一份数据。
                source: [
                    ['product', '2015', '2016', '2017'],
                    ['Matcha Latte', 43.3, 85.8, 93.7],
                    ['Milk Tea', 83.1, 73.4, 55.1],
                    ['Cheese Cocoa', 86.4, 65.2, 82.5],
                    ['Walnut Brownie', 72.4, 53.9, 39.1]
                ]
            },
            // 声明一个 X 轴，类目轴（category）。默认情况下，类目轴对应到 dataset 第一列。
            xAxis: { type: 'category' },
            // 声明一个 Y 轴，数值轴。
            yAxis: {},
            // 声明多个 bar 系列，默认情况下，每个系列会自动对应到 dataset 的每一列。
            series: [{ type: 'bar' }, { type: 'bar' }, { type: 'bar' }]
        };
        // 设置配置项
        myChart.setOption(option);
        myChart.on('click', function (params) {
            // 控制台打印数据的名称
            console.log(params.name);
        });
        window.onresize = function () {
            console.log('触发');
            // 1.容器大小发生改变时,通过resize调整图标的大小
            myChart.resize();
            // 更改展现图标的大小内容
            // myChart.resize({
            //     width: 300,
            //     height: 400
            // });
        };
    </script>
</body>

</html>